import { onMounted, reactive, ref } from 'vue'
import { getRoleList } from '@/api/permission'


export function roleList() {

    // 列表加载状态
    let loading = ref<boolean>(true)

    // 数据列表
    const tableData = reactive<any>([])

    // 权限列表
    const menuTree = reactive<any>([])

    // 总条数
    let pageTotal = ref<number>(0)

    // 分页信息（size:每页显示多少条，page当前页）
    let getData = reactive<any>({
        size: 10,
        page: 1
    })
    // 挂载完加载
    onMounted(() => {
        getMenuAllListData()
    })

    // 添加菜单、子菜单、编辑时重新请求数据
    const resetMenuListData = async () => {
        tableData.length = 0
        pageTotal.value = 0
        await getMenuAllListData()
    }

    // 获取列表
    const getMenuAllListData = async () => {
        loading.value = true
        const { data: { list, perssion, page, total } } = await getRoleList('/permission/roleList', getData)
        list.map((item:any)=>{
            item.switch = item.is_show == 0 ? true : false
            item.perssionCheck = item.perssion_id.split(',')
        })
        Object.assign(tableData, list)
        Object.assign(menuTree, perssion)
        pageTotal.value = total
        setTimeout(() => {
            loading.value = false
        }, 150)
    }

    // 页面改变重新请求列表
    const handleCurrentChange = async (val: number) => {
        getData.page = val
        tableData.length = 0
        getMenuAllListData()
    }

    return {
        loading,  //表格加载中
        tableData, //表格数据
        menuTree, //权限列表
        pageTotal, //数据总条数
        getData,    //分页信息
        handleCurrentChange, // 页码改变重新请求列表
        resetMenuListData, //重新请求数据
    }
}